<template>
    <a-layout class="main">
        <!--左侧-->
        <a-layout-sider
                class="shadow ant-fixed-sidemenu sideBar"
                width="256px"
                :collapsible="collapsible"
                v-model="collapsed"
                :trigger="null">
            <div id="logo">
                <img src="@/assets/logo.svg" alt="">
                <transition name="fade">
                    <h1 v-show="!collapsed">shop-admin</h1>
                </transition>
            </div><!--:defaultOpenKeys="['1']"-->
            <a-menu
                    :defaultSelectedKeys="curMenu"
                    :defaultOpenKeys="openKey"
                    mode="inline"
                    theme="dark"
                    :inlineCollapsed="collapsed"
            >
                <template v-for="item in getUserMenu()">
                    <a-menu-item v-if="!item.children" :key="item.path">
                        <a-icon type="android" />
                        <span>{{item.title}}</span>
                    </a-menu-item>
                    <sub-menu v-else :menu-info="item" :key="item.path"/>
                </template>
            </a-menu>
        </a-layout-sider>
        <!--左侧结束-->
        <!--右侧-->
        <a-layout class="rightContent">
            <a-layout-header class="header">
                <div class="toggleSide" @click="toggleCollapsed">
                    <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
                </div>
                <a-dropdown class="userDrop">
                    <span class="action ant-dropdown-link user-dropdown-menu">
                      <span>{{ nickname }}</span>
                    </span>
                    <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
                        <a-menu-item key="0">
                            <router-link :to="{ name: 'center' }">
                                <a-icon type="user"/>
                                <span>个人中心</span>
                            </router-link>
                        </a-menu-item>
                        <a-menu-item key="1" @click="visible = true">
                                <a-icon type="lock"/>
                                <span>修改密码</span>
                        </a-menu-item>
                        <a-menu-divider/>
                        <a-menu-item key="3">
                            <a href="javascript:;" @click="handleLogout">
                                <a-icon type="logout"/>
                                <span>退出登录</span>
                            </a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </a-layout-header>
            <router-view/>
        </a-layout>
        <!--右侧-->
        <!--修改密码-->
        <a-modal
                title="修改密码"
                :width="640"
                :visible="visible"
                :confirmLoading="confirmLoading"
                :maskClosable="false"
                @ok="handleSubmit"
                @cancel="handleCancel"
        >
            <a-spin :spinning="confirmLoading">
                <a-form :form="form" autocomplete="off">
                    <a-form-item
                            label="原密码"
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                    >
                        <a-input type="password" v-decorator="['password', {rules: [{required: true, message: '请输入原密码！'}]}]" />
                    </a-form-item>
                    <a-form-item
                            label="新密码"
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                    >
                        <a-input type="password" v-decorator="['newPassword', {rules: [{validator:checkPass}]}]" />
                    </a-form-item>
                </a-form>
            </a-spin>
        </a-modal>
    </a-layout>
</template>

<script>
    import SubMenu from './Menu/SubMenu'
    import {mapGetters } from 'vuex'
    export default {
        components: {
            SubMenu
        },
        name:'SysLayout',
        data () {
            return {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 7 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 13 }
                },
                curMenu:[],
                openKey:[],
                collapsible:true,
                collapsed: false,
                nickname:"",
                form: this.$form.createForm(this),
                visible: false,
                confirmLoading: false,
            }
        },
        mounted(){
            const user = this.getUserInfo()
            this.nickname = user.username
            //展开菜单
            const routes = this.$route.matched.concat()
            let curPath = routes.pop().path;
            this.curMenu.push(curPath)
            let openKey = curPath.substr(0,curPath.lastIndexOf('/'))
            let openKeyArr = openKey.split('/');
            for(let s in openKeyArr){
                if(openKeyArr[s] !== ''){
                    this.openKey.push('/'+openKeyArr[s])
                }
            }
        },
        methods: {
            ...mapGetters(['getUserMenu','getUserInfo']),
            toggleCollapsed () {
                this.collapsed = !this.collapsed
            },
            handleLogout(){
                const that = this
                this.$confirm({
                    title: '提示',
                    content: '真的要注销登录吗 ?',
                    onOk () {
                        return that.$http.get(that.api.logout).then((res) => {
                            that.$router.push({name:'Login'})
                        }).catch(err => {
                            that.$message.error({
                                title: '错误',
                                description: err.message
                            })
                        })
                    },
                    onCancel () {
                    }
                })
            },
            checkPass(role,value,callback){
                if(!value || value == ""){
                    callback("请输入新密码！")
                    return;
                }
                const { form: { getFieldValue } } = this
                const username = getFieldValue('password')
                if(username == value){
                    callback("您输入的新密码和旧密码一致！");
                    return;
                }
                callback()
            },
            handleSubmit(){
                this.confirmLoading = true
                const { form: { validateFields } } = this
                validateFields((errors, values) => {
                    if(!errors){
                        this.$http.post(this.api.updatePassword,values).then(res => {
                            if(res.code != 0){
                                this.$message.error(res.msg)
                            }else{
                                this.$message.success("修改密码成功，请重新登陆！")
                                this.visible = false
                                setTimeout(() => {
                                    this.$http.get(this.api.logout).then((res) => {
                                        this.$router.push({name:'Login'})
                                    }).catch(err => {
                                        this.$message.error({
                                            title: '错误',
                                            description: err.message
                                        })
                                    })
                                },1000)
                            }
                            this.confirmLoading = false
                        }).catch(err => {
                            console.log(err)
                        })
                    }else{
                        this.confirmLoading = false
                    }
                })
            },
            handleCancel(){
                this.visible = false
            }
        },
    }
</script>
<style lang="less" scoped>
    .main{
        .sideBar{
            text-align: left;
            min-height: 100vh;
            #logo{
                overflow: hidden;
                height: 64px;
                padding-left: 24px;
                line-height: 64px;
                background: #002140;
                img{
                    width: 32px;
                    height: 32px;
                }
                h1{
                    display: inline-block;
                    vertical-align: top;
                    color: #fff;
                    margin-left: 5px;
                    font-size: 20px;
                    font-weight: 600;
                }
            }
        }
        .rightContent{
            .header{
                background: #fff;
                padding: 0;
                padding-right: 15px;
                box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
                position: relative;
                .toggleSide{
                    display: inline-block;
                    float: left;
                    cursor: pointer;
                    width: 68px;
                    font-size: 20px;
                    text-align: center;
                    &:hover{
                        background: #fafafa;
                    }
                }
            }
            .userDrop{
                display: inline-block;
                float: right;
                padding: 0 10px;
                &:hover{
                    background: #fafafa;
                    cursor: pointer;
                }
            }
        }
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 0.5s ease-out;
    }

    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>
